<template>
  <div>
    <div style="height: 40px;display: flex;margin-bottom: 10px;align-items: center; float: right;">
      <div style="width: 200px;border:1px solid #DCDFE6;border-radius: 6px;">
        <el-input
          clearable
          placeholder="对账单号"
          v-model="sn"
        ></el-input>
      </div>
      <div>
        <el-button style="margin-left: 10px" icon="el-icon-search" type="primary"
                   @click="loadData">查询
        </el-button>
      </div>
    </div>
    <el-table
      :data="verifyList"
      border
      stripe
      ref="verifyTable"
      height="300px"
      @row-dblclick="doubleClick"
      style="width: 100%;margin-top: 20px;margin-bottom: 20px">
      <el-table-column
        label="业务日期"
        width="155"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.orderDate | datetimeFormatter }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="对账单号"
        width="150"
        align="center"
        prop="sn"
      >
      </el-table-column>
      <el-table-column v-if="verifyType==1"
                       label="供应商名称"
                       width="150"
                       align="center"
                       prop="supplierName"
      >
      </el-table-column>
      <el-table-column v-if="verifyType==0"
        label="客户名称"
        width="150"
        align="center"
        prop="memberName"
      >
      </el-table-column>
      <el-table-column
        label="应付金额"
        align="left"
        width="150"
        prop="amount">
      </el-table-column>
      <el-table-column
        label="类型"
        align="left"
        width="150"
        prop="type">
        <template slot-scope="scope">
          <span>{{scope.row.type | watchType}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        align="left"
        width="150"
        prop="status">
        <template slot-scope="scope">
          <span>{{scope.row.status | watchStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        align="left"
        width="150"
        prop="memo">
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                @pagination="loadData"></pagination>
  </div>


</template>

<script>
import Pagination from '@/components/Pagination'
import { list as verifyList } from '@/api/supplierVerify'

export default {
  data() {
    return {
      verifyList: [],
      sn: '',
      status : 1,
      total: 0,
      pageSize: 20,
      pageNum: 1,
      keyword: ''
    }
  },
  props:[
      'verifyType'
  ],
  created() {
    this.loadData();
  },
  components: {
    Pagination
  },
  filters: {
    watchStatus(val) {
      if (val == 0) {
        return '未审核'
      } else if (val == 1) {
        return '已审核'
      } else if (val == 2) {
        return '已完成'
      } else if (val == 3) {
        return '已取消'
      }
    },
    watchType(val) {
      if (val == 0) {
        return '应收款'
      } else if (val == 1) {
        return '应付款'
      }
    },
    watchDiscount (val) {
      if (val === undefined) {
        return 0
      } else {
        return val
      }
    }
  },
  methods: {
    loadData() {
      let params = new URLSearchParams()
      params.append('type', this.verifyType)
      params.append('sn', this.sn)
      params.append('status', this.status);
      params.append('pageSize', this.pageSize)
      params.append('pageNum', this.pageNum)
      verifyList(params).then(res => {
        this.verifyList = res.data.data
        this.total = res.data.total
      }).catch(err => {
        console.log(err)
      })
    },
    //双击添加商品
    doubleClick(val) {
      this.$emit('verifyDbClick', val)
    },
  }
}
</script>

<style scoped>
  /deep/.el-dialog__body{
    padding: 0 !important;
  }
</style>
